<template>
	<!--    demoXY快速开发框架主页-->
	<div>
		<el-container class="home_container">
			<el-aside style="width: 200px" class="home_aside">
				<div class="logo">
					<h1>
						<img src="@/assets/logo.png" />
					</h1>
				</div>
				<el-menu router :default-active="navActive">
					<menu-tree :menuList="menuList"></menu-tree>
				</el-menu>
			</el-aside>

			<el-container>
				<el-header class="home_header">
					<div class="top_navbar">
						<i
							:class="isFullscreen ? 'iconfont icon-tuichuquanping' : 'iconfont icon-shuyi_quanping'"
							style="color: white; margin-right: 10px; font-size: 28px"
							@click="isScreenFull"
						></i>
						<img :src="imgUrl" class="photo" />
						<el-dropdown trigger="click">
							<span class="el-dropdown-link"
								>{{ currentUser }}<i class="el-icon-arrow-down el-icon--right"></i
							></span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="message()" index="index">首页</el-dropdown-item>
								<el-dropdown-item @click.native="userInfo()">个人信息</el-dropdown-item>
								<el-dropdown-item @click.native="setting()">界面设置</el-dropdown-item>
								<el-dropdown-item index="loginout" @click.native="logout()">退出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</el-header>
				<el-container class="home-main">
					<nav>
						<div
							class="page-tabs"
							:class="$route.path == tab.path ? 'active' : ''"
							v-for="tab in tabs"
							@click="goto(tab)"
						>
							<a class="menuTab">
								{{ tab.title }}
								<i class="el-icon-circle-close" @click.stop="removeTab(tab)"></i>
							</a>
						</div>
					</nav>
					<el-main>
						<router-view></router-view>
					</el-main>
				</el-container>
			</el-container>
		</el-container>
		<el-drawer title="界面设置" :visible.sync="drawer" :direction="direction" size="20%">
			<b>版权信息</b>
			<p>Version：Demo-Starter 1.0</p>
			<p>Copyright: DemoXY ©2021-2025</p>

			<b>设置</b>
			<el-form>
				<el-form-item>
					<span>tab标签</span>
					<el-switch v-model="value1" active-text="开启" inactive-text="关闭"> </el-switch>
				</el-form-item>
				<el-form-item>
					<span>顶部菜单</span>
					<el-switch v-model="value1" active-text="开启" inactive-text="关闭"> </el-switch>
				</el-form-item>
				<el-form-item>
					<span>全屏</span>
					<el-switch v-model="value1" active-text="开启" inactive-text="关闭"> </el-switch>
				</el-form-item>
				<el-form-item>
					<el-switch v-model="value1" active-text="开启" inactive-text="关闭"> </el-switch>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
import { Sketch } from "vue-color"
import { findUserById, logout } from "../../api/admin/permissions/user"
import menuTree from "@/views/components/menuTree"
import { clearToken } from "@/utils/auth"

import { mapState, mapActions } from "pinia" // 引入映射函数
import useStore from "@/store/index.js"
import { Base64 } from "js-base64"
import screenfull from "screenfull"

export default {
	data() {
		return {
			navActive: "",
			currentUser: "",
			imgUrl: "",
			isFullscreen: false,
			tabs: [],
			icon: "iconfont icon-shuyi_quanping",
			drawer: false,
			direction: "rtl",
			value1: "",
		}
	},
	components: {
		"sketch-picker": Sketch,
		menuTree,
	},
	provide() {
		return {
			tabs: this.tabs,
		}
	},
	computed: {
		...mapState(useStore, ["menuList", "router"]),
	},
	beforeMount() {
		this.$router.onReady(() => {
			let currentUrl = window.location.href
			this.navActive = currentUrl.split("#")[1]

			this.router.forEach((r) => {
				if (r.path && r.path.substr(r.path.lastIndexOf("/")) === this.$route.path) {
					this.tabs.push({
						path: this.$route.path,
						title: r.name,
					})
					return
				}
			})
		})
	},
	created() {
		screenfull.on("change", () => {
			if (screenfull.isFullscreen) {
				this.icon = "iconfont icon-tuichuquanping"
			} else {
				this.icon = "iconfont icon-shuyi_quanping"
			}
		})
		let userInfo = localStorage.getItem("userInfo")
		let info = JSON.parse(Base64.decode(userInfo))
		this.currentUser = info.username
		this.imgUrl = info.userFace
	},
	mounted() {
		//调用监听事件
		this.screenFull()
	},
	methods: {
		...mapActions(useStore, ["changeMenu", "changeRouter"]),
		handleOpen(key, keypath) {},
		//退出登录
		logout() {
			logout().then((res) => {
				localStorage.removeItem("userInfo")
				clearToken()
			})
			this.changeMenu()
			this.$router.push("/login")
		},
		userInfo() {
			this.$router.push("/userInfo")
		},
		//监听Esc事件；
		screenFull() {
			//监听f11事件
			window.addEventListener("keydown", this.KeyDown, true)
			//这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,isScreenFull
			document.addEventListener("fullscreenchange", () => {
				this.isFullscreen = !this.isFullscreen //你要切换得图标使用得属性
			})
			document.addEventListener("mozfullscreenchange", () => {
				this.isFullscreen = !this.isFullscreen
			})
			document.addEventListener("webkitfullscreenchange", () => {
				this.isFullscreen = !this.isFullscreen
			})
			document.addEventListener("msfullscreenchange", () => {
				this.isFullscreen = !this.isFullscreen
			})
		},
		KeyDown(event) {
			if (event.keyCode === 122) {
				event.returnValue = false
				this.isScreenFull() //触发全屏的方法
			}
		},
		//全屏方法
		isScreenFull() {
			if (!screenfull.isEnabled) {
				return false
			}
			screenfull.toggle()
		},
		goto(tab) {
			this.$router.push(tab.path)
		},

		removeTab(tab) {
			const index = this.tabs.findIndex((t) => t.path === tab.path)
			this.tabs.splice(index, 1)

			if (this.tabs.length === 0) {
				this.$router.push("/index")
			} else {
				if (this.tabs[index]?.path) {
					this.$router.push(this.tabs[index].path)
					debugger
				} else {
					this.$router.push(this.tabs[index - 1].path)
					console.log(this.tabs, this.tabs[index - 1].path)
					debugger
				}
			}
		},
		message() {
			this.$router.push("/message")
		},
		setting() {
			this.drawer = true
		},
	},
}
</script>

<style lang="scss" scoped>
@import "~@/style/public.scss";
@import "~@/style/admin/index.scss";
.photo {
	width: 30px;
	height: 30px;
	border-radius: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #eee;
	vertical-align: middle;
}
</style>
